<!DOCTYPE HTML>
<html>

<head>
    <title>Timeline | markers | Markers example</title>

    <style type="text/css">
        body,
        html {
            font-family: sans-serif;
            font-size: 11pt;
        }
    </style>

    <script src="node_modules/vis-timeline/dist/vis-timeline-graph2d.min.js"></script>
    <link href="node_modules/vis-timeline/dist/vis-timeline-graph2d.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <p>The Timeline has a function to add multiple custom time markers which can be dragged by the user.</p>
    <p>In this example, you can add new markers by clicking the timeline below and delete the markers by double-clicking
        it.</p>
    <p>
        <input type="text" id="markerText" placeholder="marker text">
    </p>

    <div id="visualization"></div>

    <script type="text/javascript">
        var container = document.getElementById('visualization');
        var items = new vis.DataSet({
            type: { start: 'ISODate', end: 'ISODate' }
        });
        var customDate = new Date();
        var options = {
            start: new Date(Date.now() - 1000 * 60 * 60 * 24),
            end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6),
            snap: function (date, scale, step) {
                var hour = 60 * 60 * 1000;
                return Math.round(date / hour) * hour;
            },
            orientation: {
                item: 'bottom',
                axis: 'top'
            },
            format: {
                majorLabels: {
                    millisecond: 'YYYY-MM-DD HH:mm:ss',
                    second: 'YYYY-MM-DD HH:mm',
                    minute: 'YYYY-MM-DD',
                    hour: 'YYYY-MM-DD',
                    weekday: 'YYYY-MM',
                    day: 'YYYY-MM',
                    month: 'YYYY',
                    year: ''
                }
            },
            locale: 'zh-cn'
        };
        var timeline = new vis.Timeline(container, items, options);

        timeline.on('click', function (properties) {
            var eventProps = timeline.getEventProperties(properties.event);
            if (eventProps.what === 'custom-time') {
                // timeline.removeCustomTime(eventProps.customTime);
            } else {
                var id = new Date().getTime();
                var markerText = document.getElementById('markerText').value || undefined;
                timeline.addCustomTime(eventProps.time, id);
                // timeline.setCustomTimeMarker(markerText, id);
            }
        });
    </script>
</body>

</html>